<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  #box{width: 504px;height: 60px;background: #fff;margin: 200px auto;}
  strong{line-height: 60px;font-size: 20px;float: left;}
  span{font-size: 24px;cursor: pointer;color:#F5F508;float: left;margin-top: 15px;padding: 0 5px;}
  img{position: relative;left:5px;top: 10px;border: 1px solid #000;float: left;}
  b{color: #EF7300;display: none;float: left;margin-top: 20px;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Box = document.getElementById('box');
      var Span = Box.getElementsByTagName('span');
      var Img = Box.getElementsByTagName("img")[0];
      var B = Box.getElementsByTagName("b");
      var num = 0;
      function Int(){  //初始样式
        for (var i = 0; i < Span.length; i++) {
          B[i].style.display = "none";
          Span[i].style.color = "#F5F508";
          Img.style.display = "inline-block";
        };
      } 
      function fun1(a){//鼠标移入后标签替换图片
        Img.style.display = "none";
        B[a].style.display = "inline-block";
      }    
      for (var i = 0; i < Span.length; i++){
        Span[i].index = i;
        Span[i].onmouseover = function(){
          Int();
          fun1(this.index);
          if(this.index < 2){
            for (var i = 0; i <= this.index; i++){
             Span[i].style.color = "green";
            }
          }else{
            for (var i = 0; i <= this.index; i++){
             Span[i].style.color = "red";
            }
          }  
        }
        Span[i].onmouseout = function(){
          Int();
        }
        Span[i].onclick = function(){
          num = this.index;
          for (var i = 0; i < Span.length; i++){
            Span[i].onmouseout = function(){
              Int();
              fun1(num);
              if(num < 2){
                for (var i = 0; i <= num; i++){
                 Span[i].style.color = "green";
                }
              }else{
                for (var i = 0; i <= num; i++){
                 Span[i].style.color = "red";
                }
              } 
            }
          } 
        }
      };   
    }
  </script>
</head>
<body>
  <div id="box">
    <strong>*总体评价:</strong>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <b>很差</b>
    <b>较差</b>
    <b>还行</b>
    <b>推荐</b>
    <b>力荐</b>
    <img src="images/9.png">
  </div>
</body>
</html>